<template>
  <div class="app-container calendar-list-container">
    <!--功能-->
    <div class="filter-container">
      <el-row>
        <!--<el-col :span="6">-->
          <!--<el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" v-waves @click="cleanClick">清理</el-button>-->
        <!--</el-col>-->
        <el-col :span="24" style="text-align: right">
          <el-input size="small" style="width: 200px" class="filter-item fsc-search" placeholder="库存ID" v-model="page.condition.stockId" @keyup.enter.native="searchClick"></el-input>
          <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-search" @click="searchClick">
            搜索
          </el-button>
          <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-circle-plus-outline" @click="moreSearch">更多
          </el-button>
          <el-dropdown trigger="click" :hide-on-click=false style="float: right;margin-left: 10px">
            <span class="el-dropdown-link">
              <el-button class="filter-item" size="small" type="primary" v-waves>
                选择列
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-checkbox-group v-model="theadCheckVal">
                  <el-checkbox label="stockId">库存ID</el-checkbox>
                  <el-checkbox label="skuId">车架号信息ID</el-checkbox>
                  <el-checkbox label="qty">库存量</el-checkbox>
                  <el-checkbox label="storeHouseId">仓库ID</el-checkbox>
                  <el-checkbox label="locationId">库位ID</el-checkbox>
                  <el-checkbox label="lotNo1">车架号</el-checkbox>
                  <el-checkbox label="storeHouseName">仓库名称</el-checkbox>
                  <el-checkbox label="inboundTme">入库时间</el-checkbox>
                  <el-checkbox label="inboundUser">入库操作人</el-checkbox>
                  <el-checkbox label="shipmentGid">指令号</el-checkbox>
                  <el-checkbox label="remark">备注</el-checkbox>
                </el-checkbox-group>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
      <div style="clean:both"></div>
    </div>
    <!--更多查询-->
    <div v-if="searchFlag">
      <el-form ref="form" :model="page.condition" label-width="80px" :inline="true">
        <el-form-item label=车架号:>
          <!--<el-input placeholder="请输入车架号" class="w200" clearable v-model="page.condition.vinNo"></el-input>-->
          <el-input type="textarea" :rows="2" style="width: 250px"
                    v-model="page.condition.lotNo1"  placeholder="请输入车架号, 以逗号来分隔"></el-input>
        </el-form-item>
        <el-form-item label="仓库:">
          <el-input placeholder="请输入仓库" class="w200" clearable v-model="page.condition.storeHouseName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchClick" style="margin-left: 10px">查询</el-button>
          <el-button type="primary" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="clean:both"></div>
    <!--主列表-->
    <el-table ref="paymentTable" :data="paymentList" v-loading="listLoading"
              @selection-change="handleSelectionChange"
              element-loading-text="加载中" border fit highlight-current-row style="width: 100%;margin-top:5px">
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column :key="key" align="center" :width="value.width" v-for='(value,key) in tableThead' :label="value.title">
        <template slot-scope="scope">
          <el-button v-if="value.key === 'lotNo1'" type="text" @click="getInfoList(scope.row)" style="color: #409EFF; font-size: 12px;">{{scope.row.lotNo1}}</el-button>
          <!--<div v-else-if="value.key === 'status'">{{scope.row[value.key] | paymentStatusFilter}}</div>-->
          <div v-else>{{scope.row[value.key]}}</div>
        </template>
      </el-table-column>
      <!--<el-table-column align="center" fixed="right" label="操作" width="100" class-name="small-padding">-->
        <!--<template slot-scope="scope">-->
          <!--<el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" v-waves icon="el-icon-delete" @click="updatePaymentClick(scope.row.id)">编辑</el-button>-->
        <!--</template>-->
      <!--</el-table-column>-->
    </el-table>
    <!--分页-->
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page.current" :page-sizes="[10,20,30,50]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
      </el-pagination>
    </div>
    <!--二级 明细列表-->
    <table-detail
      :edit_flag="detailFlag"
      :edit_main_title="detailMainTitle"
      :edit_select_row="detailRowData"
      ref="adjustStockDetailRef"
      @edit-close="adjustStockDetailClose">
    </table-detail>
  </div>
</template>
<script type="text/javascript">
  import * as stockAPI from '@/api/stock/stock'
  import waves from '@/directive/waves' // 水波纹指令
  import tableDetail from './adjustStockConfig/adjustStockDetail'
  // import * as Utils from '@/utils/index'
  const defautlTableThead = [
    { key: 'skuId', title: '车架号信息ID', width: '160' },
    { key: 'lotNo1', title: '车架号', width: '160' },
    // { key: 'stockId', title: '库存ID', width: '160' },
    { key: 'qty', title: '库存量', width: '' },
    { key: 'storeHouseId', title: '仓库ID', width: '' },
    // { key: 'locationId', title: '库位ID', width: '160' },
    { key: 'storeHouseName', title: '仓库名称', width: '' },
    // { key: 'inboundTme', title: '入库时间', width: '160' },
    // { key: 'inboundUser', title: '入库操作人', width: '' },
    // { key: 'shipmentGid', title: '指令号', width: '160' },
    { key: 'remarks', title: '备注', width: '200' }
  ]
  export default {
    name: 'payment',
    directives: { waves },
    components: { tableDetail },
    data() {
      return {
        theadCheckVal: [
          'stockId',
          'skuId',
          'qty',
          'storeHouseId',
          'locationId',
          'lotNo1',
          'storeHouseName',
          'inboundTme',
          'inboundUser',
          'shipmentGid',
          'remarks'
        ],
        tableThead: defautlTableThead,
        search: {},
        page: {
          current: 1,
          size: 10,
          total: 0,
          condition: {
            lotNo1: '',
            storeHouseName: ''
          }
        },
        paymentList: [], // 主列表
        selectRow: [], // 选择勾中项
        listLoading: true,
        searchFlag: true,
        detailFlag: false, // 明细显示
        detailRowData: {}, // 传入明细的当前列
        detailMainTitle: '' // 明细标题
      }
    },
    created() {
      this.getList()
    },
    watch: {
      theadCheckVal(valArr) {
        this.tableThead = defautlTableThead.filter(v => {
          for (var i = 0; i < valArr.length; i++) {
            if (v.key === valArr[i]) {
              return v
            }
          }
        })
      }
    },
    methods: {
      // 运力单列表 弹窗关闭
      adjustStockDetailClose() {
        this.detailFlag = false
      },
      // 查看明细 弹窗显示
      getInfoList(row) {
        const that = this
        that.detailRowData = row
        that.detailMainTitle = '库存明细列表'
        that.detailFlag = true
      },
      // 列表查询
      getList() {
        this.$data.listLoading = true
        // 处理是否展开更多
        let queryParam = {}
        if (this.searchFlag) {
          queryParam = this.page
        } else {
          Object.assign(queryParam, this.page)
          queryParam.condition = {}
        }
        stockAPI.queryStockQty(queryParam).then(result => {
          this.$data.listLoading = false
          if (result.code === 0) {
            this.paymentList = result.data.records
            this.page.total = result.data.total
          } else {
            this.$notify({
              title: '信息提示',
              message: result.message,
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      // 更多click
      moreSearch() {
        this.searchFlag = !this.searchFlag
      },
      // 搜索
      searchClick() {
        this.getList()
      },
      // 分页size变化
      handleSizeChange(val) {
        this.page.size = val
        this.getList()
      },
      // 分页当前页变化
      handleCurrentChange(val) {
        this.page.current = val
        this.getList()
      },
      // 重置
      resetSearch() {
        this.page.current = 1
        this.page.size = 10
        this.page.condition = {
          lotNo1: '',
          storeHouseName: ''
        }
        this.getList()
      },
      // 检查是否选择单条
      checkSelect(data) {
        const l = data.length
        if (l === 0) {
          this.$message({
            message: '未选择',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        return true
      },
      // 表格改变时
      handleSelectionChange(val) {
        this.selectRow = val
      }
    }
  }
</script>
<style scoped>

</style>
